import React from 'react'
import Main from './../../components/main/index';
import * as echarts from 'echarts';
import 'lib-flexible'
import Init from './../../components/init'
import Back from './../../components/back'

import {getgram} from './../../utils/apis'

import './index.scss';
type Props= {
  match:any,
  history:any
}
export default class Enneagramtest extends React.Component<Props>{

  dom = React.createRef();
  constructor(props:any){
    super(props)
  }
  state = {
    id:'',
    pid:'',
    show:false,
      ec: {
        onInit: null
      },
      current:0,
      list:[
        {
          type:"第一型",
          fraction:22,
          name:"完美型",
          assistname:"(Reformer/Perfectionist)【完美主义者】",
          yytz:"追求不断进步",
          jbsk:"我若不完美，就没有人会爱我。",
          zytz:"原则性?、不易妥协、常说“应该”及“不应该”、黑白分明、对自己和别人要求甚高、追求完美、不断改进、感情世界薄弱；希望把每件事都做得尽善尽美，希望自己或是这个世界都更进步。时时刻刻反省自己是否犯错，也会纠正别人的错。",
          tz:"忍耐 、有毅力 、守承诺 、贯彻始终 、爱家顾家、守法 、有影响力的领袖 、喜欢控制 、光明磊落。",
          shfg:"爱劝勉教导，逃避表达忿怒，相信自己每天有干不完的事。",
          rjgx:"你是典型的完美主义者，显浅易明。正因为你事事追求完美，你很少讲出称赞的说话，很多时只有批评，无论是对自己，或是对身边的人也是！又因为你对自己的超超高标准，你给自己很大压力，会很难放松自己去尽情的玩、开心的笑！",
          gjc1:"〖愤怒、不满〗",
          desc1:"属于第一型的你，相信常常这感觉，对吧？你们常有愤怒、不满的感觉都是源自你们超高的生活要求。当遇到什么不顺意时，就很容易感到忿怒、不满，觉得事情不应该这样发生……这种情绪不单是对自己，还有对周围的环境和人，都是一样，因为你对他们一样带有超高的要求。但要注意，作为你的朋友，要承受你的嬲怒情绪，的确不是容易，也会造成压力，所以要多加注意啊！",
          gjc2:"〖失望、沮丧〗",
          desc2:"同样因为你们事事追求完美的态度，让你们在生活里常常感到碰钉子、不如意。除了是对外发泄愤怒情绪，其实在内心不断经历挫败，不断经历失望。这些情绪对你们并不健康，必须积极处理。最根源的方法不是让自己做得更出色，而是调节对每事每情的看法，轻松面对！ 其他类型上面说的有的 事正确的",
          jbkj:"怕自己做错，变坏，被腐败",
          jbyw:"希望自己是对的，好的，贞洁的，有诚信的",
        },
        {
          type:"第二型",
          fraction:22,
          name:"全爱型助人型",
          assistname:"(Helper/Giver)【给予者】",
          yytz:"追求服待",
          jbsk:"我若不帮助人，就没有人会爱我。",
          zytz:"渴望别人的爱或良好关系、甘愿迁就他人、以人为本、要别人觉得需要自己、常忽略自己 ；很在意别人的感情和需要，十分热心，愿意付出爱给别人，看到别人满足地接受他们的爱，才会觉得自己活得有价值。",
          tz:"温和友善、随和 、绝不直接表达需要，婉转含蓄 、好好先生/小姐 、慷慨大方 、乐善好施",
          shfg:"爱报告事实，逃避被帮助，忙于助人，否认问题存在。",
          rjgx:"助人型(Helper)顾名思义，你很喜欢帮人，而且主动，慷慨大方！虽然你对别人的需要很敏锐，但却很多时忽略了自己的需要。在你来说，满足别人的需要比满足自己的需要更重要，所以你很少向人提出请求。这样说来，你的自我并不强，很多时候要靠帮助别人来肯定自己。",
          gjc1:"〖自豪、骄傲〗",
          desc1:"第二型的你，是否觉得这个形容很不贴切？觉得很惊奇？其实，一向表现得助人为快乐之本的你，是通过热心帮助人去肯定自己，要朋友接纳欣赏自己。所以当有朋友找你们帮助，你自是开心不已，也会有自豪和骄傲之感，因为在过程中你得到肯定和满足。",
          gjc2:"〖占有、控制〗",
          desc2:"正因为帮人得到这么多的满足，你们很想继续这样的关下去，这个很正常！可是，当你们「投资」下越多时间和心力，你希望得到的回报更多。很有可能，你们会很希望朋友会很「attach」（依赖 依靠 仰赖附和 迷恋）你，甚至是只「attach」你一个，事事对你说，跟你分享。这便反映在你内心的占有欲，若然朋友非这样对你，便会很失望，觉得他们背叛了你。甚或，你可能会对他们施加压力，以控制他们。这里当然不是说每个第二型都是这样子，但当我们状态不佳，心情不太好时，的确有机会出现以上倾向。多点留意自己的情绪反应，有助控制及改善！",
          jbkj:"不被爱，不被需要",
          jbyw:"感受爱的存在",
        },
        {
          type:"第三型",
          fraction:22,
          name:"成就型",
          assistname:"(Achiever/Motivator)【实干者】",
          yytz:"追求成果",
          jbsk:"我若没有成就，就没有人会爱我。",
          zytz:"强烈好胜心，喜欢认威，常与别人比较，以成就衡量自己的价值高低，着重形象，工作狂，惧怕表达内心感受 ；希望能够得到大家的肯定。是个野心家，不断地追求有效，希望与众不同，受到别人的注目、羡慕，成为众人的焦点。",
          tz:"自信、活力充沛 、风趣幽默 、满有把握 、处世圆滑 、积极进取 、美丽形象",
          shfg:"爱数说自己成就，逃避失败，按着长远目标过活。",
          rjgx:"成就型(Achiever)你精力充沛，总是动力过人，因为你有很强的争胜欲望！你喜欢接受挑战，会把你自己的价值与成就连成一线。成就型的你会全心全意去追求一个目标，因为你相信「天下没有不可能的事」。动力十足的你，最好做leader带领其他人啦！",
          gjc1:"〖自恋、炫耀〗",
          desc1:"第三型的人倾向看自己成为颇大、颇重要的，所以有一点点的自恋、自我膨胀。所以你们都会把自己最好的一面给友人看，甚至极端时，会在朋友面前撒谎，以求「保持」自己在朋友心目中的形象。很多时，第三型真正的实力往往没有那么强，因为他们的表达实有一点点夸张。",
          gjc2:"〖害怕亲密〗",
          desc2:"第三型的你很害怕亲密关系，不是说你们会没有朋友，只是当关系进深的时候，你可能会因怕真面目被看见而避开、逃掉。所以，亲密/好朋友关系对第三型说并不容易建立，因为他们害怕被人看见自己的真面目，也因此很难开放自己与人坦诚交往。第三型的你好胜心颇强，通常认为自己不能在朋友面前「认衰」，所以会表现得「很棒很棒」的，但世界上没有一个人是十全十美的完人啊！当能容许自己以真面目视人，你的生活将很快乐！",
          jbkj:"没有成就，一事无成",
          jbyw:"感觉有价值，被接受",
        },
        {
          type:"第四型",
          fraction:22,
          name:"艺术型自我型",
          assistname:"(Artist/Individualist)【悲情浪漫者】",
          yytz:"追求独特",
          jbsk:"我若不是独特的，就没有人会爱我。",
          zytz:"情绪化，追求浪漫，惧怕被人拒绝，觉得别人不明白自己， 占有欲强，我行我素生活风格：爱讲不开心的事，易忧郁、妒忌，生活追寻感觉好；很珍惜自己的爱和情感，所以想好好地滋养它们，并用最美、最特殊的方式来表达。他们想创造出独一无二、与众不同的形象和作品，所以不停地自我察觉、自我反省，以及自我探索。",
          tz:"易受情绪影响、倾向追求不寻常、艺术性而富有意义的事物 、多幻想，认为死亡、苦难、悲剧才是极具价值和真实的生命 、对美感的敏锐可见于独特的衣着，及对布置环境的品味显出他的独特性、极具创造力、过分情绪化、容易沮丧或消沉 、常觉生命是一个悲剧 、对人若即若离，怕亲密的关系令人发现自己不完美就会离他而去。",
          shfg:"爱讲不开心的事，易忧郁、妒忌，生活追寻感觉好。",
          rjgx:"自我型(Individualist)曾否有人跟你说，你有艺术家的脾气？这个自我型就正正是艺术家的性格-多愁善感及想像力丰富，会常沉醉于自己的想像世界里。另一方面，由于你是感情主导的人，有些工作你不喜欢就可能不会做，不会考虑责任的问题。",
          gjc1:"〖嫉妒、比较〗",
          desc1:"自我型的你们其实都有点「艺术家脾气」，对吧！自怜、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界……很多时，第四型的表现会比较抽离，都是因为跟身边人比较，觉得自己不同，其他人不会明白，又觉得其他人都拥有很多你们没有的东西，所以在现实的社交圈子里很难得到满足。",
          gjc2:"〖自我沉醉、自怜〗",
          desc2:"由于从现实生活中得不到满足，自我型的朋友都会在幻想里建构自己的世界，制造一些moody（adj. 抑郁的 感伤的；情绪多变的 喜怒无常的）的环境，好让自己的情绪得以发泄出来。不过，这样一来，自我型的人都显得比较情绪化，令其他人更不能明白你们，更孤立起来。所以你们要小心，不要让自己过分脱节啊！",
          jbkj:"没有独特的自我感受或存在意义",
          jbyw:"寻找自我，在内在经验中找到自我认同",
        },
        {
          type:"第五型",
          fraction:22,
          name:"智慧型思想型",
          assistname:"(Thinker/Observer) 【观察者】",
          yytz:"追求知识",
          jbsk:"我若没有知识，就没有人会爱我。",
          zytz:"冷眼看世界，抽离情感,喜欢思考分析，要知很多，但缺乏行动，对物质生活要求不高，喜欢精神生活，不善表达内心感受 ；想藉由获取更多的知识，来了解环境，面对周遭的事物。他们想找出事情的脉络与原理，做为行动的准则。有了知识，他们才敢行动，也才会有安全感。",
          tz:"温文儒雅 、有学问 、条理分明 、表达含蓄 、拙於词令 、沉默内向 、冷漠疏离 、欠缺活力 、反应缓慢",
          shfg:"爱观察、批评，把自己抽离，每天有看不完的书。",
          rjgx:"理智型(Thinker)你是个很冷静的人，总想跟身边的人和事保持一段距离，也不会让情绪左右。很多时候，你都会先做旁观者，后才投入参与。另外，你也需要充分的私人空间和高度的私隐，否则你会觉得很焦虑，不安定！你也很有机会成为专家，例如电脑啦，漫画啦，时装啦，因为你对知识是非常热爱的！",
          gjc1:"〖好辨、抽离〗",
          desc1:"思想型的人常常观察身边的事，却很少参与，所以感情投入也很少。还有，他们好辨，很执着，却少有「辨输」的空间和量度。对知识的执着固然重要，但经验生活中所得的体会也非常可贵，希望你们取得平衡，得到最多！",
          jbkj:"无能，无知",
          jbyw:"能干，知识丰富",
        },
        {
          type:"第六型",
          fraction:22,
          name:"忠诚型",
          assistname:"(Team Player/Loyalist) 【怀疑论者】",
          yytz:"追求忠心",
          jbsk:"我若不顺从，就没有人会爱我。",
          zytz:"做事小心谨慎，不轻易相信别人，多疑虑,喜欢群体生活，为别人做事尽心尽力，不喜欢受人注视，安于现状，不喜转换新环境；相信权威、跟随权威的引导行事，然而另一方面又容易反权威，性格充满矛盾。他们的团体意识很强，需要亲密感，需要被喜爱、被接纳并得到安全的保障。",
          tz:"忠诚 、警觉 、谨慎 、机智 、务实 、守规 、纪律维持者。",
          shfg:"爱平和讨论，惧怕权威，传统可给予安全感，害怕成就、逃避问题。",
          rjgx:"忠诚型(Loyalist)你会是一个很好员工，因为你很忠心尽责。安全感对你都很重要，因为当遇到新的人和事，都会令你产生恐惧、不安的感觉。基于这种恐惧不安，凡事你都会作最坏打算，换句话说，你为人都比较悲观，也较易去逃避了事。",
          gjc1:"〖害怕、忧虑、犹豫〗",
          desc1:"忠诚型的你们表现得忠诚，是因为你们害怕，对很多事情皆忧虑，很多时都向坏处打算，所以做人很谨慎。同一原因，由于害怕做错决定，所以当面对抉择的时候，你们大都显得很犹疑，心大心细。适当的忧虑能保护我们，但若过份忧虑则会阻碍我们前行！留意留意！",
          jbkj:"得不到支援及指引，单凭一己的能力不能兼顾全部",
          jbyw:"得到支援及安全感",
        },
        {
          type:"第七型",
          fraction:22,
          name:"活跃型开朗型",
          assistname:"(Enthusiast) 【享乐主义者】",
          yytz:"追求快乐",
          jbsk:"我若不带来欢乐，就没有人会爱我。",
          zytz:"乐观,要新鲜感，追上潮流，不喜承受压力，怕负面情绪；想过愉快的生活，想创新、自娱娱人，渴望过比较享受的生活，把人间的不美好化为乌有。他们喜欢投入经验快乐及情绪高昂的世界，所以他们总是不断地寻找快乐、经验快乐。",
          tz:"快乐热心 、不停活动 、不停获取 、怕严肃认真的事情 、多才多艺 、对玩乐的事非常熟悉亦会花精力钻研 、不惜任何代价只要快乐 、嬉笑怒骂的方式对人对事。",
          shfg:"爱讲自己经验，喜欢制造开心，人生有太多开心的事情等着他。",
          rjgx:"活跃型(Adventurer)活跃型的你，就是如此这般：乐观、精力充沛、迷人、好动、贪新鲜、五时花六时变……「最近要玩得开心」就是你的生活哲学！你们很需要生活有新鲜感，所以很不喜欢被束缚、被控制。你的活力是玩的活力，又跟第三型的成就型又有所不同，相信你们是活动搅手，玩极唔厌！",
          gjc1:"〖不耐烦、冲动、上瘾〗",
          desc1:"好玩、享乐主义行头的活跃型，做事欠缺耐性，因为你们都很怕闷。不耐烦之余，也很易冲动行事，因第七型的朋友做事鲜有周详计划，很讲即庆，想做就去做！但你们必须要小心，就算遇上一种玩意、兴趣你十分喜欢，也得学习不要沉迷下去！始终要顾及自己的身体及其他事情啊！(我这样说是因为第七型的人比其他型的人更上烟瘾、毒瘾、赌瘾、或者打机瘾等等，小心！)",
          jbkj:"被剥削，被困于痛苦中",
          jbyw:"追求快乐、满足、得偿如愿",
        },
        {
          type:"第八型",
          fraction:22,
          name:"领袖型能力型",
          assistname:"(Leader) 【领导者】",
          yytz:"追求权力",
          jbsk:"我若没有权力，就没有人会爱我。",
          zytz:"追求权力，讲求实力，不靠他人，有正义感,要话事，喜欢做大事；是绝对的行动派，一碰到问题便马上采取行动去解决。想要独立自主，一切靠自己，依照自己的能力做事，要建设前不惜先破坏，想带领大家走向公平、正义。",
          tz:"具攻击性、自我中心 、轻视懦弱、尊重强人 、为受压迫者挺身而出 、冲动 、有什麼不满意即场发作 、主观 、直觉。",
          shfg:"爱命令，说话大声、有威严，报复心理、爱辩论，靠意志来掌管生活。",
          rjgx:"领袖型(Leader)很多领袖都有以下特质：豪爽、不拘小节、自视甚高、遇强越强、关心正义、公平。你们清楚自己的目标，并努力前进。由于不愿被人控制，且具有一定的支配力，所以你们很有潜质做领袖带领大家。由于你们都较好胜，有时候会对人有点攻击性，让人感到压力。",
          gjc1:"〖侵略、挑战、反叛〗",
          desc1:"第八型的你通常身兼领袖身份，可以有权力全权安排，也可指挥他人。由于你们的动力较强，有时会予人侵略之感，而这个也是你本身的动力源头，你很有争胜及控制的欲望，但却要小心运用，不要用之伤害别人！此外，你专向难度及规范挑战，就是「明知山有虎，偏向虎山行」的任性。所以很可能，妈妈叫你不要做的东西，你偏不听；老师要你学的，你偏扮傻……你会是这样子吗？要是真的话，会是于你有益吗？",
          jbkj:"被认为软弱、被人伤害、控制、侵犯",
          jbyw:"自己决定生命的路向，捍卫本身的利益，做强者",
        },
        {
          type:"第九型",
          fraction:22,
          name:"和平型和谐型",
          assistname:"(Peacemaker) 【调停者】",
          yytz:"追求和平",
          jbsk:"我若不和善，就没有人会爱我。",
          zytz:"须花长时间作决定，难于拒绝他人，不懂宣泄愤怒；显得十分温和，不喜欢与人起冲突，不自夸、不爱出风头，个性淡薄。想要和人和谐相处，避开所有的冲突与紧张，希望事物能维持美好的现状。忽视会让自己不愉快的事物，并尽可能让自己保持平稳、平静。",
          tz:"温和友善 、忍耐、随和 、怕竞争 、无法集中注意力，有时像梦游 、不到最后一分钟不会完工 、非常倚赖别人的提醒 、注意力集中在细节、次要的事 、对大多数事物没有多大的兴趣 、不喜欢被人支配 、绝不直接表达不满，只是阳奉阴违。",
          shfg:"爱调和，做事缓慢，易懒惰、抑压，生活追寻舒服。",
          rjgx:"和平型(Peacemaker)在很多情况，你们都是和平使者，善解人意，随和。你们很容易了解别人，却不是太清楚自己想要什么，会显得优柔寡断。相对地说，你们的主见会比较少，宁愿配合其他人的安排，做一个很好的支持者，所以你是比较被动的。",
          gjc1:"〖怕羞、怕事、懒惰〗",
          desc1:"和平型的你与世无争，渴望人人能和平共处，很怕引起冲突，是不显眼的一个。由于从不试图突出自己，你们会比较怕羞、怕事，也很容易有躲懒的意欲，因为你喜爱和平，不喜爱辛劳，所以你也不会PUSH自己！若你心想干一番大事，则要好好鞭策自己啦！",
          jbkj:"转变与压力，失去平衡",
          jbyw:"维系内在的平静及安稳",
        }
      ],
      summary:'',
      isLoading:true,
      isError:false,
  }
  getData(){
    const that = this
    const {id,list,pid} = that.state
    
    getgram({resumeid:id,positionid:pid}).then(res=>{
      console.log(res,'获取数据');
      that.setState({isLoading:false})
      const {returnCode,result:{summary,scores}} = res
      if(returnCode=='AAAAAAA'){
        list.map((obj,idx)=>{
          obj.fraction = scores[idx]
          return obj
        })

        let arr2 = list.sort(function(a,b){
            return b.fraction-a.fraction
        })

        that.setState({
          summary,
          list:arr2
        })
        that.initChar(scores)
      }
    }).catch(err=>{
      that.setState({isError:true})
    })
  }

  initChar(arr){
    // 基于准备好的dom，初始化echarts实例
    const elem : HTMLCanvasElement = document.getElementById('echart') as HTMLCanvasElement;

    var myChart = echarts.init(elem);
    // 绘制图表
    myChart.setOption({   
           tooltip: {},

           radar: {
               name: {
                   textStyle: {
                       color: '#fff',
                       backgroundColor: '#999',
                       borderRadius: 3,
                       padding: [3, 5]
                   }
               },
               indicator: [
                   { name: '第一型', max:15},
                   { name: '第二型', max:15},
                   { name: '第三型', max:15},
                   { name: '第四型', max:15},
                   { name: '第五型', max:15},
                   { name: '第六型', max:15},
                   { name: '第七型', max:15},
                   { name: '第八型', max:15},
                   { name: '第九型', max:15}
               ]
           },
           series: [{
               name: '预算 vs 开销（Budget vs spending）',
               type: 'radar',
               areaStyle: {
                 color:'rgba(253,211,73,1)'
               },
               lineStyle:{
                 color:'rgba(253,211,73,1)'
               },
               symbol: 'none',  //取消折点圆圈
               data: [
                   {
                       value: arr,
                       name: '九型人格'
                   }
               ]
           }]
    });
  }

  componentDidMount() {
    const that = this    
      const {match:{params:{id,pid}}} =this.props
      that.setState({id,pid},()=>{
        that.getData()
      })  
  }


  change(idx:number){
    const {current} = this.state
    // this.current = current===idx?null:idx
    this.setState({
      current:current===idx?null:idx
    })
  }


  render () {
    const {list,current,summary,isError,isLoading} = this.state
    return (
      <>
        {isError?<div>加载出错</div>:<>
          {isLoading?<Init></Init>:
          <Main type="3">
            <div className='flex r-top alignitems'>
              <div className="r-title flex1">测评结果</div>
              <Back history={this.props.history}/>
            </div>
            <div className="r-desc">您的{summary}</div>
            <div id="echart"></div>
            <div className='r-label'>您的九型人格排序</div>
            
            <div className="table">
              <div className="thead flex">
                <div className="arrow"></div>
                <div className="w1">人格</div>
                <div className="flex1 w2">人格类型</div>
                <div className="w3">得分</div>
              </div>
              <div className="tbdoy">
              {
                list.map((item, index) => {
                  return <div key={index}>
                  <div className="tr flex" onClick={()=>this.change(index)}>
                    <div className="arrow">
                      <div className={`arrowicon ${current==index?'change':''}`}>
                        <span className="iconfont iconjiantou"></span>
                      </div>
                    </div>
                    <div className="w1">{item.type}</div>
                    <div className="flex1 w2">{item.name}</div>
                    <div className="w3">{item.fraction}</div>
                  </div>
                  <div className={`content dcontent ${current==index?'':'hide'}`}>
                    <div className="line">
                      <span className="attrname">欲望特质：</span>
                      <span>{item.yytz}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">基本困思：</span>
                      <span>{item.jbsk}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">主要特征：</span>
                      <span>{item.zytz}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">主要特质：</span>
                      <span>{item.tz}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">生活风格：</span>
                      <span>{item.shfg}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">人际关系：</span>
                      <span>{item.rjgx}</span>
                    </div>
                    <div className="line">
                      <span className="bold">{item.gjc1}</span>
                      <span>{item.desc1}</span>
                    </div>
                    <div className="line" v-if="item.gjc1">
                      <span className="bold">{item.gjc2}</span>
                      <span>{item.desc2}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">基本恐惧：</span>
                      <span>{item.jbkj}</span>
                    </div>

                    <div className="line">
                      <span className="attrname">基本欲望：</span>
                      <span>{item.jbyw}</span>
                    </div>
                    <div className="line">
                      <span className="attrname">主要特质：</span>
                      <span>{item.tz}</span>
                    </div>
                  </div>
                </div>
                })
              }
                




              </div> 
            </div>
            
          </Main>
          }
      </>}
    </>
    );
  }
}
